<template>
  <view class="container">
    <!-- 头部：搜索框和轮播图 -->
    <view class="header">
      <!-- 搜索框 -->
      <view class="search-box">
        <input class="search-input" placeholder="请输入搜索内容"  @click="gotoSearch"/>
      </view>

      <!-- 轮播图 -->
      <swiper class="swiper" autoplay circular indicator-dots>
        <swiper-item v-for="(item, index) in swiperList" :key="index">
          <image class="swiper-image" :src="item.image" mode="aspectFill"></image>
        </swiper-item>
      </swiper>
    </view>

    <!-- 导航栏 -->
    <view class="nav">
	<button class="nav-button"  v-for="(nav, index) in navList" :key="index" 
			@click="navigateTo(nav.path)">
		 <image :src="nav.icon" class="nav-img"></image>
      <text class="nav-title">{{ nav.title }}</text>
	</button>
    </view>

    <!-- 内容区域 -->
    <view class="content">
      <view class="section-up">
		  <!-- 校园招聘公告 -->
		  <view class="section">
		    <text class="section-title">校园招聘公告</text>
		    <text class="section-content">新闻标题标题标题标题标题标题标题标题标题...</text>
		  </view>
	  </view>

      <view class="section-down">
		  <!-- 动态公告 -->
		  <view class="section" v-for="(section, index) in sections" :key="index">
			<text class="section-title">{{ section.title }}</text>
			<text class="section-link">{{ section.link }}</text>
		  </view>
	  </view>
    </view>
	<!-- 企业急招 -->
	<view class="job-section">
	  <view class="section-header">
		<text class="section-title">企业急招</text>
		<text class="more">更多 ></text>
	  </view>
	  <!-- 横向滚动区域 -->
	  <scroll-view class="job-scroll" scroll-x>
		  <view class="job-list">
			<view class="job-card" v-for="(job, index) in jobs" :key="index">
			   <image class="job-logo" :src="job.logo" mode="aspectFill"></image>
			  <text class="job-company">{{ job.company }}</text>
			  <text class="job-industry">{{ job.industry }}</text>
			  <text class="job-link">更多 →</text>
			</view>
		  </view>
	  </scroll-view>
	</view>
	
	<!-- 排行榜 -->
	<view class="king_table">
		<text v-for="(tab, index) in tabs" :key="index" @click="operation(index)" 
		:class="tableactive == index ? 'active' : 'inactive'">{{ tab }}</text>
	</view>
	<view  v-if="tableactive == 1" >
		<block v-for="(item,index) in userlist" :key="index">
			<view class="company_box" @click="goto('/pages/enterprise/resumedetails?id='+item.uid+'&source=1')">
				<view style="flex: 1;width: 80rpx;height: 90rpx;margin-right:10rpx">
					<image style="max-width:100%;max-height:100%" src="../../static/img/renc.jpg"></image>
				</view>
				<view class="company_item_box">
					<view class="company_name">
						{{item.name || ""}} / {{item.age1 || 25}}岁
					</view>
					<view class="company_job">
						{{item.work_y || ""}} | {{item.education || ""}} | {{item.salary || ""}} | {{item.age1 || 25}}岁 
					</view>
				</view>
				
			</view>
		</block>
	</view>
	<view  v-else >
		<block v-for="(item,index) in entlist" :key="index">
			<view class="company_box" @click="goto('/resume/entdetails?id='+item.ent_id+'&source=1')">
				<view style="flex: 1;width: 80rpx;height: 90rpx;margin-right:10rpx">
					<image style="max-width:100%;max-height:100%" src="../../static/img/qiye.jpg"></image>
				</view>
				<view class="company_item_box">
					<view class="company_name">
						{{item.ent_name || ""}}
					</view>
					<view class="company_addr">
						{{item.fieldname || ""}}
					</view>
				</view>
			</view>
		</block>
	</view>
	<!-- 底部导航栏 -->
	<BottomNav :activeTab="activeTab" />
  </view>
</template>

<script>
	import util from "@/utils/utils.js"
	import { getKingEntList,getKingResumeList } from '@/api/ranking.js'
	import { getAds,getHotEnt } from '@/api/index.js'
	import BottomNav from "@/components/BottomNav.vue" // 引入组件
export default {
	components: {
		BottomNav, // 注册组件
	  },
  data() {
    return {
		activeTab: "home", // 当前选中的选项卡
		type: 2, // 或其他默认值
		tableactive: 2, // 默认激活的选项卡
		entlist: [],
		userlist: [],
		adslist: [],
		hotentlist:[],
		form:{
			page:1,
			pagesize:20,
			total:0,
			keyword:'',
		},
		yaoqingform:{
			uid:'',
			position_id:'',
			position_name:'',
			interview_time:'',
			interview_date:''
		},
		positionList:[],
		defaultIndex:[[]],
      // 轮播图数据
      swiperList: [
        { image: "https://zhimao.shengdunyun.net/uploads/wangeditor/20250308/67cbf29eaaf89.png" },
        { image: "https://zhimao.shengdunyun.net/uploads/wangeditor/20250308/67cbf29eaaf89.png" },
        { image: "https://zhimao.shengdunyun.net/uploads/wangeditor/20250308/67cbf29eaaf89.png" },
      ],
	// 导航栏数据
	  navList: [
		{
		  icon: "https://zhimao.shengdunyun.net/uploads/wangeditor/20250308/67cbf2dbc15ed.png",
		  title: "全职招聘",
		  path: "/pages/enterprise/fulltime", // 跳转路径
		},
		{
		  icon: "https://zhimao.shengdunyun.net/uploads/wangeditor/20250308/67cbf29ea7c83.png",
		  title: "大学生招聘",
		  path: "/pages/student/student", // 跳转路径
		},
		{
		  icon: "https://zhimao.shengdunyun.net/uploads/wangeditor/20250308/67cbf2dbc5469.png",
		  title: "直招窗口",
		  path: "/pages/direct/direct", // 跳转路径
		},
		{
		  icon: "https://zhimao.shengdunyun.net/uploads/wangeditor/20250308/67cbf29ea3bce.png",
		  title: "合作学院",
		  path: "/pages/enterprise/university-list", // 跳转路径
		},
	  ],
	 // 内容区域数据
		      sections: [
		        { title: "公司动态公告", link: "最新资讯 →" },
		        { title: "专业应用资讯", link: "最新资讯 →" },
		        { title: "行业最新信息", link: "最新资讯 →" },
		      ],
      // 企业急招数据
      jobs: [
        {
		  logo: "https://zhimao.shengdunyun.net/uploads/wangeditor/20250308/67cbf29ea499d.png",
          company: "佛山秋水神瞳视力有限公司",
          industry: "健康/视力/护理",
        },
        {
			logo: "https://zhimao.shengdunyun.net/uploads/wangeditor/20250308/67cbf29ea499d.png",
          company: "佛山秋水神瞳视力有限公司",
          industry: "健康/视力/护理",
        },
        {
			logo: "https://zhimao.shengdunyun.net/uploads/wangeditor/20250308/67cbf29ea499d.png",
          company: "佛山秋水神瞳视力有限公司",
          industry: "健康/视力/护理",
        },
      ],
	  // 排行榜选项卡
	        tabs: ["企业榜", "人才榜", "人才榜", "人才榜", "人才榜", "人才榜"],
    };
  },
  methods: {
	   gotoSearch() {
	       uni.navigateTo({
	         url: '/pages/enterprise/search', // 用户协议页面路径
	       });
	      },
		  
   // 跳转到指定页面
	  navigateTo(path) {
		uni.navigateTo({
		  url: path,
		});
	  },
		  
  	operation(tableactive){
  		this.tableactive = tableactive
  		if(tableactive == 1){
  			this.getResume()
  		}
  		else{
  			this.getEntList()
  		}
  	},
  	
  	//获取企业信息
  	getEntList() {
  		getKingEntList(this.form).then(res=>{
  			if(res.code == 200){
  				this.entlist = res.data
  			}
  			else{
  				return uni.showToast({
  					icon: 'none',
  					title: res.msg
  				});
  			}
  		})
  	},
  	
  	//获取热门人才信息
  	getHotEnt() {
  		getHotEnt({}).then(res=>{
  			if(res.code == 200){
  				this.hotentlist = res.data
  			}
  			else{
  				return uni.showToast({
  					icon: 'none',
  					title: res.msg
  				});
  			}
  		})
  	},
  	
  	//获取人才信息
  	getResume() {
  		getKingResumeList({}).then(res=>{
  			if(res.code == 200){
  				this.userlist = res.data
  			}
  			else{
  				return uni.showToast({
  					icon: 'none',
  					title: res.msg
  				});
  			}
  		})
  	},
  	goto(tourl) {
  		uni.navigateTo({
  			url: tourl
  		});
  	}
  },
  onLoad() {
  	getAds().then(res=>{
  		if(res.code == 200){
  			this.adslist = res.data
  		}
  	});
  	this.getEntList()
  	this.getHotEnt()
  },
  onShow() {
  	this.type = util.get('type')
  	if(this.type == 1){
  		uni.redirectTo({
  			url: '/resume/index'
  		});
  	}
  },
  
};
</script>

<style>
.container {
  padding: 20px;
  background-color: #f9f9f9;
}

.header {
  margin-bottom: 20px;
}

/* 搜索框样式 */
.search-box {
	width: 355px;
	height: 40px;
  display: flex;
  align-items: center;
  background:linear-gradient(0deg, #E3E6FF 0%, #C5C6FF 100%);
  border-radius: 32px;
  padding: 10px;
  margin-bottom: 20px;
}

.search-input {
  flex: 1;
  font-size: 14px;
  border: none;
  outline: none;
}

/* 轮播图样式 */
.swiper {
  height: 200px;
  border-radius: 5px;
  overflow: hidden;
}

.swiper-image {
  width: 100%;
  height: 100%;
}

/* 导航栏样式 */
.nav {
  display: flex;
  justify-content: center;
  padding: 10px;
  border-radius: 5px;
  background: linear-gradient(180deg, #C3C4FF 0%, #DDDEFE 100%);
  margin-bottom: 20px;
}

.nav-button {
  margin: 0 15px;
  color: #fff;
  background: linear-gradient(180deg, #C3C4FF 0%, #DDDEFE 100%);
  border-radius: 5px;
  font-size: 14px;
  padding: 0;
}

.nav-button::after {
	border: none;
}

.nav-img{
	width: 46px;
height: 46px;
display: block;
}

.nav-title{
	width: 50px;
	height: 20px;
	color: #333;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

/* 内容区域样式 */
.content {
  display: block;
  justify-content: center;
  padding: 10px;
  border-radius: 5px;
  background: linear-gradient(180deg, #C3C4FF 0%, #DDDEFE 100%);
  margin: 0;
}

.section-up {
  margin-bottom: 20px;
  border-bottom: 1px solid #8d8d8d;
}


.section-up .section{
	width: 300px;
	height: 35px;
	line-height: 35px;
}

.section-down {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 10px;
}


.section-down .section{
	width: 98px;
	height: 55px;
	display: inline-block;
	border-radius: 5px;
	border: 1px solid #FFF;
	background: linear-gradient(180deg, #FEFAA5 0%, #FFFEE3 100%);
	margin-bottom: 20px;
}

.section-title {
  font-size: 12px;
  color: #333;
  margin-bottom: 10px;
}

.section-content {
  font-size: 10px;
  color: #666;
}

.section-link {
  font-size: 14px;
  color: #007bff;
  display: block;
}

/* 企业直招样式 */
.job-section{
	display: block;
	justify-content: center;
	padding: 10px;
	border-radius: 5px;
	background: linear-gradient(180deg, #C3C4FF 0%, #DDDEFE 100%);
	margin: 20px 0 0 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.more {
  font-size: 14px;
  color: #007bff;
}

.job-scroll {
  white-space: nowrap; /* 防止内容换行 */
  width: 100%;
}

.job-list {
  display: inline-flex;
  gap: 10px;
}

.job-card {
	display: inline-block;
	  width: 115px; /* 卡片宽度 */
  border-radius: 5px;
  border: 1px solid #333;
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
  padding: 10px;
  text-align: left;
  /* width: calc(33.33% - 20px); */
}

.job-logo {
  width: 100px;
  height: 80px;
  margin-bottom: 10px;
  display: block;
}

.job-company {
  font-size: 8px;
  color: #666;
  margin-bottom: 5px;
  display: block;
}

.job-industry {
  font-size: 8px;
  color: #666;
  margin-bottom: 10px;
  display: block;
}

.job-link {
  font-size: 14px;
  color: #007bff;
}


.king_table{
			font-size: 28rpx;
			margin: 20px 10rpx;
		}
.king_table .inactive{
		margin: 10px 10rpx;
		color: #000;
	}
.king_table .active{
	background-color: #989dfd;
	padding: 16rpx 20rpx;
	color: #fff;
}
		
.company_box{
	display: flex;
	align-items: center;
	background-color: #f9f9ff;
	margin: 20rpx 30rpx;
	padding: 20rpx;
	font-size: 28rpx;
	color: #000;
	border-radius: 10rpx;
}
.company_item_box{
	flex: 2;
}
.company_logo{
	display: flex;
	justify-content: center;
	align-items: center;
	width:200rpx; 
	height:75rpx;
}
image{
	max-width: 100% !important;
	max-height: 100% !important;
}
			
.company_name{
	width:460rpx;
	font-size: 30rpx;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.company_handle{
	margin: 20rpx;
}	
.handle_shenqin{
	width: 200rpx;
	height: 80rpx;
}
			
.company_intro{
	line-height: 50rpx;
	color: #777777;
	margin-bottom: 20rpx;
}
.company_job,.company_addr{
	display: flex;
	align-items: center;
	color: #777777;
	font-size: 28rpx;
}
.company_salary{
	display: flex;
	align-items: center;
	font-size: 28rpx;
}
.jsob_yao_item{
	border: 1px solid #f3f3f3;
	background-color: #fff;
	font-size: 28rpx;
	padding: 10rpx 30rpx;
}
		
</style>